<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>NetSpri</title>

    <link rel="stylesheet" type="text/css" href="/netspri/css/reset.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="/netspri/css/text.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="/netspri/css/grid.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="/netspri/css/layout.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="/netspri/css/nav.css" media="screen" />
	
	<script type="text/javascript" src="/netspri/js/jquery-2.2.3.js"></script>


	<!-- 图表插件 -->
	<script type="text/javascript" src="/netspri/js/highcharts.js"></script>


<style type="text/css">


body{text-align: center;}

#mainp{padding-left: 120px;height: 538px;}

td {
	font-size: 20px;
}
th{
	font-size: 22px;
	font-weight: bold;
	color: navy;
	text-align: left;
	height: 34px;
}


#addbutton{

	
 	width: 150px;
    height: 50px;
  	
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0px -1px 0px #5b6ddc;
    outline: none;
    border: 1px solid rgba(0, 0, 0, .49);
 	
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 6px;
 
    background-color: #5466da;
    background-image: -webkit-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
    background-image: -moz-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
    background-image: -o-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
    background-image: -ms-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
    background-image: linear-gradient(bottom, #5466da 0%, #768ee4 100%);
     
    -webkit-box-shadow: inset 0px 1px 0px #9ab1ec;
    box-shadow: inset 0px 1px 0px #9ab1ec;
     
    cursor: pointer;
 
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}






</style>


	<script type="text/javascript">
		 $(function () {                                                                     
			 $(document).ready(function() {  
				 
				 var dataFromServer = ${datalist.data}+"";
				var darr= new Array();
					darr = dataFromServer.split(",");
		
				 
			 	Highcharts.setOptions({                                                     
			 		global: {                                                               
			 			useUTC: false                                                       
			 		}                                                                       
			 	});                                                                         
			 																				
			 	var chart;                                                                  
			 	$('#container').highcharts({                                                
			 		chart: {                                                                
			 			type: 'spline',                                                     
			 			animation: Highcharts.svg, // don't animate in old IE               
			 			marginRight: 10,                                                    
			 			events: {                                                           
			 				load: function() {                                              
			 																				
			 					// set up the updating of the chart each second             
			 					/* var series = this.series[0];                                
			 					setInterval(function() {                                    
			 						var x = (new Date()).getTime(), // current time         
			 							y = Math.random();                                  
			 						series.addPoint([x, y], true, true);                    
			 					}, 1000);   */                                                 
			 				}                                                               
			 			}                                                                   
			 		},                                                                      
			 		title: {                                                                
			 			text: '实时响应曲线'                                            
			 		},                                                                      
			 		xAxis: {                                                                
			 			type: 'datetime',                                                   
			 			tickPixelInterval: 100                                              
			 		},                                                                      
			 		yAxis: {                                                                
			 			title: {                                                            
			 				text: '响应值'                                                   
			 			},                                                                  
			 			plotLines: [{                                                       
			 				value: 0,                                                       
			 				width: 1,                                                       
			 				color: '#808080'                                                
			 			}]                                                                  
			 		},                                                                      
			 		tooltip: {                                                              
			 			formatter: function() {                                             
			 					return '<b>'+ this.series.name +'</b><br/>'+                
			 					Highcharts.numberFormat(this.y, 3);                         
			 			}                                                                   
			 		},                                                                      
			 		legend: {                                                               
			 			enabled: false                                                      
			 		},                                                                      
			 		exporting: {                                                            
			 			enabled: false                                                      
			 		},                                                                      
			 		series: [{                                                              
			 			name: '响应值',                                                
			 			data: (function() {                                                 
			 				// generate an array of random data                             
			 				var data = [],                                                  
			 					time = (new Date()).setHours(0, 0, 0, 0),                              
			 					i;                                                          
			 					
			 				//从服务器端获取到的数据，图表显示
			 				for (i = 0; i < darr.length; i++) {                                    
			 					data.push({                                                 
			 						x: time + i * 3000,                                     
			 						y: (darr[i]*1)                                        
			 					});                                                         
			 				}                                                               
			 				return data;                                                    
			 			})()                                                                
			 		}]                                                                      
			 	});                                                                         
			 });                                                                             
			 																				
			 }); 
		 
	</script>



</head>


<body>
   
    <div class="container_12" style="padding-top: 20px;">

        <div class="grid_12 header-repeat">

            <div id="branding">

                <div class="floatleft">

                    <!-- <img src="img/logo.png" alt="Logo" /> -->
                    <h2 style="font-family: cursive;font-size: 50px;padding-left: 80px;color: white;">${datalist.detectionDate }</h2></div>

                <div class="floatright">

                    <div class="floatleft">

                        <img src="/netspri/img/img-profile.jpg" alt="Profile Pic" /></div>

                    <div class="floatleft marginleft10" style="margin-right: 80px;">

                        <ul class="inline-ul floatleft">

                            <li style="font-size: 25px;">Hello&nbsp;</li>

                            <li style="font-size: 25px;"><a href="#">${User.username }</a></li>

                            

                        </ul>

                    </div>

                </div>

              

            </div>

        </div>




	
      <div class="floatright" style="padding-right: 200px;">

        
<input type="button" id="addbutton"  value="返 回" onclick="history.back()">
          </div>

        <div class="grid_10" id="mainp" >

	<p></p>
	
			<div id="container" style="width:900px;height:380px;margin:35px auto;"></div>
			



			

                    
			



        </div>

       

    </div>

   

    <div id="site_info">

        <p>

           <!--  Copyright <a href="#">jsls_spri</a>. All Rights Reserved. -->&nbsp;

        </p>

    </div>

  	


    <!--wrapper end-->

	<!--Dynamically creates analytics markup-->

	 
</body>

</html>
